<template>
  <view class="full-page-alert full-page-alert-spm" :style="{
    'backgroundImage': `url(${staticImgs.noticePageBg})`
  }" >
    <navigationBar :my-property="navigationBarDataInfo" />
    <view class="tit-box">测前须知</view>
    <view class="scroll-content">
      <view class="bold-text">在做题过程中，请注意以下几点： </view>
      <view class="text-main">1.请根据你最近一周的实际情况填写本问卷。</view>
      <view class="text-main">2.请仔细阅读题目。在了解题目意思后，根据最近一周的情况选择最符合的选项，答案没有对错之分，如实作答即可。</view>
      <view class="text-main">3.如在答题过程中因电话呼入、系统卡顿等导致测试中断，可重新进入小程序测试。</view>
  
      <template v-if="referenceList && referenceList.length>0">
        <view class="text-main">4.本测试参考文献如下：</view>
        <view class="text-main" v-for="(item,index) in referenceList" :key="index">
          [{{index+1}}]{{item}}
        </view>
      </template>
    </view>
  
  
    
    
    <view class="confirm-btn"
      v-if="true"
    :style="{'backgroundImage': `url(${staticImgs.noticePageBtn})`}"
     @click="confirmFullTip">
      <!-- 我知道了 -->
    </view>
    <view v-else class="confirm-btn" @click="confirmFullTip">
      我知道了
    </view>
  </view>
  
</template>

<script>
    
  export default{
    props:{
      referenceList:{
        type:Array,
        default:()=>[]
      }
    },
    data(){
      return {
        navigationBarDataInfo: {
          "bg_color": "rgba(0,0,0,0)",
          "color": "#333",
          "flag": 1,
          "name": "",
          "hasEntity": true,
        },
        staticImgs:{
          noticePageBg: this.imgBaseURL + '/scl/question-page/love-mbti/notice-page-bg.jpg',
          noticePageBtn: this.imgBaseURL + '/scl/question-page/love-mbti/notice-page-btn.png',
        }
      }
    },
    methods:{
     confirmFullTip(){
       this.$emit('ok')
     } 
    }
  }
  
</script>

<style lang="scss" scoped>
  
  .full-page-alert {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(180deg, #F9FDF2 0%, #FAFCF8 100%);
      background-size: 100% 100%;
      z-index: 999;
  
      .tit-box {
        margin: 60rpx auto;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 40rpx;
        color: #902F86;
        line-height: 56rpx;
        letter-spacing: 1px;
        text-align: center;
        font-style: normal;
      }
  
      .scroll-content {
        height: 64vh;
        overflow: scroll;
        overflow-x: hidden;
        margin: auto;
        width: 666rpx;
        // height: 1037rpx;
        font-family: PingFangSC, PingFang SC;
  
        .bold-text {
          font-weight: 500;
        }
  
        .text-main {
          width: 100%;
          margin-top: 12rpx;
          word-break: break-all;
        }
  
        font-size: 30rpx;
        color: #902F86;
        line-height: 42rpx;
        letter-spacing: 1px;
        text-align: justify;
        font-style: normal;
      }
  
      .confirm-btn {
        width: 660rpx;
        height: 180rpx;
        background: linear-gradient(180deg, #82E3BE 0%, #58B938 100%);
        border-radius: 62rpx;
        margin: auto;
        // margin-top: 24rpx;
        position: absolute;
        bottom: calc(84rpx + constant(safe-area-inset-bottom));
        bottom: calc(84rpx + env(safe-area-inset-bottom));
        z-index: 999;
        left: 50%;
        transform: translateX(-50%);
  
  
        text-align: center;
        line-height: 100rpx;
        font-size: 34rpx;
        font-family: PingFangSC, PingFang SC;
        color: #fff;
        
        background-size: 100% 100%;
      }
    }
    
    .full-page-alert-spm{
      .tit-box{
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 40rpx;
        color: #902F86;
        line-height: 56rpx;
        letter-spacing: 4px;
        text-align: center;
        font-style: normal;
      }
      .scroll-content{
        .bold-text{
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 30rpx;
          color: #902F86;
          line-height: 42rpx;
          text-align: left;
          font-style: normal;
        }
        
        .text-main{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 30rpx;
          color: #902F86;
          line-height: 46rpx;
          text-align: justify;
          font-style: normal;
        }
      }
    
      .confirm-btn{
        width: 660rpx;
        height: 190rpx;
      }
    }
  
</style>